<!--
 * @Date: 2021-10-18 16:42:12
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2021-11-18 16:20:20
 * @FilePath: \tianjushi-kanban\src\components\MoveTable.vue
--> 
<template>
  <div> 
    <div class="table_con_box" :style="'height:'+tableheight+'px;width:'+width">
      <table class="table_th_box">
        <tbody>
          <tr :style="'height:'+trheight+'px'">
            <template v-for="(thdom, index) in th">
            <th :width="TdwidthComputed[index]">
              {{ thdom }} 
            </th>
            
            </template>
          </tr>
        </tbody>
      </table>
      <div class="table_move_box" :style="'height:'+(tableheight-trheight)+'px'">
        <table
          class="table_td_box" 
          ref="domtdbox"
          style="table-layout: fixed;top:0;" 
        >
        <template  v-for="(trdom,i) in td" :key="i" >
          <tr :style="'height:'+trheight+'px;line-height:'+trheight+'px;'">
            <template v-for="(tddom,index) in trdom" :key="i+'_'+index" >
              <td :width="TdwidthComputed[index]" v-html="tddom" ></td>
            </template>
          </tr>
          </template>

          <tr class="nodata" v-show="td.length==0" :style="'height:'+trheight+'px;line-height:'+trheight+'px;'">暂无数据</tr>

        </table>
      </div>
    </div>
  </div>
</template>

<script>  

import { ClockCircleOutlined } from "@ant-design/icons-vue"; 
import { onMounted,toRefs, ref,reactive,watch,computed ,getCurrentInstance} from 'vue';
export default {
  components: {
    ClockCircleOutlined,
  },
  name: "MoveTable",
  props: { 
     width: {
      type: String,
      default: "100%",
    },
    margin: {
      type: Number,
      default: 5,
    },
    speed: {
      type: Number,
      default: 50,
    },
     tableheight: {
      type: Number,
      default: 500,
    },
    trheight: {
      type: Number,
      default: 40,
    },
    tdwidth: {
      type: Array,
      default: [],
    },
    th: {
      type: Array,
    },
    td: {
      type: Array,
      default: [],
    },
  },computed: {
    // 计算属性的 getter
    TdwidthComputed: function () {  
      let lenTh = this.th.length
      if(this.tdwidth.length==0){
        let arr = Array(lenTh).fill( 100/lenTh+"%" )
        return arr;
      }else{ 
        return this.tdwidth;
      }   
    }
  },
  setup(props) {    
    const domtdbox = ref(null); 
     let timer = null ; 
     //挂载
    const move = ()=>{
          
    let _domtdbox = domtdbox.value;
    let box_height =  props.tableheight-props.trheight;
    let tbody_height = props.trheight*props.td.length;

  
  if (tbody_height > box_height) {
      
						let hcount = 0;
						let margin = 5;
						let lineheight = props.trheight + margin*2;
						let offset = 1; 
             if (timer!=null) {
              clearInterval(timer);
              }
            
					   timer = setInterval(function () {  
							let t =  parseInt(_domtdbox.style.top) ;//top值 
               _domtdbox.style.top =  t - offset + 'px'; 
               hcount = 1 - parseInt(_domtdbox.style.top)%lineheight ; 
							if (hcount >= lineheight) {  
              
                let newTr = _domtdbox.firstElementChild.cloneNode(true);
                 _domtdbox.appendChild(newTr);
                 _domtdbox.removeChild(_domtdbox.firstElementChild); 

                 _domtdbox.style.top =   (t - offset + lineheight - margin) + "px";
							   hcount = 0 ;
							};
              
							//hcount += offset; //移动距离

					 	}, props.speed); 
					} 

   }

    onMounted(()=>{ 
      move() ;
    })

    /*监听props*/
    watch(props, (newProps, oldProps) => {
      console.log("变化");
       move() ; 
    }); 

    return {
      domtdbox
    }
  }  
};
</script>

<style scoped>
.nodata { font-size: 20px; text-align: center;}
.table_move_box {
   position: relative;
   overflow: hidden;
}

.table_con_box { 
   width: 100%;
   padding: 0 10px;
   box-sizing: border-box;
}

.table_th_box {
   width: 100%;
   z-index: 10;
}

.table_th_box th {
   background: rgba(32, 187, 252, 0.2);
   color: #fff;
   font-size: 20px;
   text-align: center; 
   border-bottom: 2px solid #3EC1D2;
}

.table_td_box {
   width: 100%;
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
}

.table_td_box tr { 
   color: #A4FDFB;
   background: rgba(32, 187, 252, 0.15);
   display: block;
   margin: 5px 0;
   width: 100%;
   border-radius: 5px; 
}

/* .table_td_box tr:nth-child(odd) {
   background: #041140;
} */

.table_td_box td {
   text-align: center;
   font-size: 20px;
   display: inline-block; 
   font-weight: bold;
}

</style>